<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级设置</el-breadcrumb-item>
        <el-breadcrumb-item>等级权益设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-form ref="rulePowerForm page-container-detail"  :model="rulePowerForm">
        <el-row class="mb30">
          <el-form-item label="等级名称：" class="labelAlignment"><span class="font18">{{rulePowerForm.levelName}}</span></el-form-item>
        </el-row>
        <el-row class="mb30">
          <el-form-item label="所属组织：" class="labelAlignment"><span class="font18">{{rulePowerForm.deptName}}</span></el-form-item>
        </el-row>
        <el-row class="mb60">
          <el-form-item label="等级权益："   class="labelAlignment w1027">
            <template>
              <el-transfer 
              ref="myTransfer"
              v-model="rulePowerForm.ruleIds" 
              :data="data" 
              :titles="['可选权限', '已选权限']"
              >
              </el-transfer>
            </template>
          </el-form-item>
        </el-row >
            <el-form-item class="btnAlignment">
              <el-button :size="size" @click="back" type="primary" plain>{{ $t("action.cancel") }}</el-button>
              <el-button :size="size" type="primary" @click="saveRule()">保存</el-button>
            </el-form-item>
      </el-form>
    </div>


  </div>
</template>

<script>
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
  import XLSX from "xlsx";
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
    },
    data() {
      return {
        HEIGHT: window.innerHeight,
        startTime:null,
        endTime:null,
        data:[],
        id:this.$route.query.id,
        businessId:"",
        deptMsg:localStorage.getItem('user'),//当前登录组织信息
        userId:localStorage.getItem("userId"),//当前登录用户id
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        deptName:null,
        deptOption:[],
        content: null,
        size: "small",
        rulePowerForm: {
          id:'',
          deptId:'',
          deptName:"",
          levelName:'',
          ruleIds:[]
       },
        pageResult: {},
        value:0,
        printPage:false,
        editLoading: false,
        reviewFormRules: {

        },
        checked: [],
        statusList: []
      };
    },
    methods: {
      queryData(){
        let this_=this;
        let query={};
        query.id=this.id
        query.deleteFlag=0;
        this_.utils.request.queryMegradeRuleSimple(query,function(res){
           if(res.code == '0000'){
              this_.rulePowerForm.levelName=res.data.rows[0].levelName;
              this_.rulePowerForm.deptName=res.data.rows[0].deptName;
              this_.rulePowerForm.deptId=res.data.rows[0].deptId;
              this_.rulePowerForm.id=res.data.rows[0].id;
              this_.queryMemberRuleByDeptid(res.data.rows[0].deptId);
              this_.query(res.data.rows[0].deptId,res.data.rows[0].id);
           }
        })
      },
      query(deptId,id){
        let this_=this;
        let query={};
        query.deptId=deptId;
        query.gradeId=id;
        query.deleteFlag=0;
        this_.utils.request.queryMegradeRule(query,function(res){
           if (res.code == "0000") {
               res.data.forEach(items=>{
                this_.rulePowerForm.ruleIds.push(items.legalRuleId);
             })
            }
        })
      },
      //获取当前平台下的所有权益
      queryMemberRuleByDeptid(deptId){
        let this_=this
        let query={};
        this_.data=[];
        query.deptId=deptId;
        query.deleteFlag=0;
        query.status=2;
        query.legalRuleType=7;
        this_.utils.request.queryMemberRuleByDeptid(query,function(res){
           if(res.code == '0000'){
             res.data.forEach(items=>{
               this_.data.push({
                 key:items.id,
                 label:items.legalRuleName,
               })
             })
           }
        })
      },
      back(){
        this.$router.go(-1);//返回上一层
      },
      //保存方法
      saveRule(){
        let this_=this
        var params = Object.assign({}, this.rulePowerForm);
        if(params.ruleIds.length==0){
          this_.$message({ message: "保存时至少选择一条权限", type: "error" });return;
        }
        this_.$confirm("确认提交吗？", "提示", {closeOnClickModal: false}).then(() => {
           this_.utils.request.saveGradeRule(params,function(res){
              if (res.code == "0000") {
                this_.$message({ message: "操作成功", type: "success" });
              } else {
                this_.$message({ message: "操作失败, " + data.msg, type: "error" });
              }
              this_.queryData();
           })
        })
      },
      //获取子平台列表
      queryDeptOption(){
        let query={}
        let this_=this
        this_.utils.request.queryChildList(query,function(res){
          if(res.code == '0000'){
            this_.deptOption=res.data.rows[0]
          }
        })
      },      
    },
    mounted() {
       this.queryData()
    }
  };
</script>

<style lang="scss" scoped>
/deep/ .el-transfer-panel{
   width: 250px !important;
}
.page-container-detail {
  padding: 40px 40px 60px;
}
/deep/ .el-transfer-panel {
  width: 460px !important;
  height: 318px !important;
}
.mb60 {
  margin-bottom: 60px;
}
.btnAlignment {
  // text-align: center;
  padding-left: 29.5%;
  /deep/ .el-button {
    width: 102px;
    height: 32px;
    margin-right: 60px;
  }
}
/deep/ .el-form-item__label {
  // margin-right: 20px;
  font-size: 18px;
}
/deep/ .el-transfer__buttons {
  button {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  button:nth-child(1) {
    margin-bottom: 80px;
  }
  .el-transfer__button {
    border-radius: 35px !important;
    width: 35px;
    height: 35px !important;
    text-align: center;
    line-height: 35px !important;
    position: relative;
    span {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
    }
  }
}
// /deep/ .el-transfer__button {
//   border-radius: 35px !important;
//   width: 35px;
//   height: 35px !important;
//   text-align: center;
//   line-height: 35px !important;
// }
// /deep/ .el-transfer__buttons button{
//   position: relative;
//   /deep/ span{
//     position: absolute;
//     top: 50%;
//     transform: translateY(-50%);
//     left: 10px;
//   }
// }
@media screen and (min-width: 1279px) and (max-width: 1919px){
    /deep/ .el-transfer-panel {
  width: 345px !important;
  height: 218px !important;
}
.btnAlignment {
  // text-align: center;
  padding-left: 38.5%;
  /deep/ .el-button {
    width: 102px;
    height: 32px;
    margin-right: 60px;
  }
}
}
</style>
